<template>
	<custom-header-vue :customTitle="customTitle" :backIcon="true" class="header" :right-view="true"
		:center-view="false">
		<!--    右侧自定义内容-->
		<template v-slot:right>
			<view class="f-s-26" style="color: var(--grey-text)">{{ userInfo.name }}</view>
		</template>
		<!--    插槽自定义内容-->
		<template v-slot:custom>
			<view class="flex-row flex-jus-bet p-l-30 p-r-30 p-b-20 flex-ali-cen" v-if="limit_type == 2">
				<view class="f-s-26" style="color: var(--grey-text)">桌台消费
					<text class="p-l-10 f-s-26" style="color: var(--white-text)">
						{{ $commonJs.formatNumber(roomInfo.total_money) || 0 }}
					</text>
				</view>
				<view class="f-s-26" style="color: var(--grey-text)">月可签
					<text class="p-l-10 f-s-26" style="color: var(--white-text)">
						{{ $commonJs.formatNumber(signList.can_use_money_month) || 0 }}
					</text>
				</view>
				<view class="f-s-26" style="color: var(--grey-text)">日可签
					<text class="p-l-10 f-s-26" style="color: var(--white-text)">
						{{ $commonJs.formatNumber(signList.can_use_money_day) || 0 }}
					</text>
				</view>
			</view>
			<view class="flex-row flex-jus-bet p-l-30 p-r-30 p-b-20 flex-ali-cen" v-else>
				<view class="f-s-26" style="color: var(--grey-text)">桌台消费
					<text class="p-l-10 f-s-26" style="color: var(--white-text)">
						{{ $commonJs.formatNumber(roomInfo.total_money) || 0 }}
					</text>
				</view>
				<view class="f-s-26" style="color: var(--grey-text)">数量签送</view>
			</view>
			<view class="custom-search">
				<input class="uni-input" :placeholder="placeholderInput"
					placeholder-style="font-size:28rpx;text-indent:26rpx" adjust-position="false" cursor="20"
					selection-start="20" v-model="keyword_search" style="color: var(--white-text)"
					@confirm="handleSearchClick" />
				<view class="sure-search" style="margin-left: 8rpx;" @click="handleSearchClick">搜索</view>
			</view>
		</template>
	</custom-header-vue>
	<view class="flex-col flex-jus-bet flex-1" :style="{'paddingTop':scrollTop}">
		<view class="flex-row flex-jus-bet" :style="{'height':scrollHeight}">
			<!--  左边类型-->
			<scroll-view scroll-y :style="{'height':scrollHeight}" class="scroll  " :show-scrollbar="false"
				style="box-sizing: border-box;">
				<!-- <view class="bor-bot" v-for="(item,index) in goodsList" :key="index" style="padding: 0 16rpx;"
          :style="{'background':chooseTypeIndex == index?'var(--bg-center-color)':''}" @click="chooseType(index)"> -->
				<view class="bor-bot" v-for="(item,index) in goodsList" :key="index" style="padding: 0 16rpx;"
					@click="chooseType(index)">
					<view class="flex flex-wrap flex-ali-cen text-line p-t-20 p-b-20"
						:class="{'active-type':chooseTypeIndex == index}">
						{{ item.category_name }}
					</view>
				</view>
			</scroll-view>

			<!--  右边明细-->
			<scroll-view scroll-y :style="{'height':scrollHeight}" class="scroll"
				style="display: flex;flex: 1;margin-left: 10px;background: var(--bg-center-color);"
				:show-scrollbar="false" :scroll-into-view="rightView" @scroll="onScroll">
				<view :id="'index-'+index" v-for="(item,index) in goodsList" :key="index">
					<view class="p-l-20 p-r-20 bor-bot f-s-28"
						style="height: 40px;line-height: 40px;color: var(--grey-text);">
						{{ item.category_name }}
					</view>
					<view class="flex-row flex-ali-cen bor-bot p-l-20 p-r-20 flex-1"
						style="height: 100px;box-sizing: border-box" v-for="(goods,index1) in item.item" :key="index1">
						<view style="height: 80px;width: 80px;">
							<image style="height: 80px;width: 80px;"
								:src="goods.img?goods.img : '/static/image/black_logo.png'"></image>
						</view>
						<view class="flex-col flex-jus-bet m-l-16 flex-1" style="height: 80px">
							<view class="f-s-28 flex-row text-line-one" style="color:var(--white-text);"
								v-if="goods.hasOwnProperty('specs_name')">
								{{ goods.specs_name }}
							</view>
							<view class="f-s-28 flex-row text-line-one" style="color:var(--white-text);"
								v-else-if="goods.hasOwnProperty('name')">
								{{ goods.name }}
							</view>
							<view class="flex-row flex-ali-cen">
								<view class="p-l-14 p-r-14 f-s-24 p-t-4 p-b-4" v-if="goods.hasOwnProperty('price')"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: #ff6767;">
									￥{{ goods.price }}
								</view>
								<view class="p-l-14 p-r-14 f-s-28 p-t-4 p-b-4" v-else
									style="background: var(--room-type-bg);border-radius: 8rpx;color: #ff6767;">
									多规格
								</view>
								<view class="p-l-10 p-r-10 f-s-24 m-l-20  p-t-4 p-b-4"
									v-if="goods.hasOwnProperty('specs_code')"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
									{{ goods.specs_code }}
								</view>
								<view class="p-l-10 p-r-10 f-s-22 m-l-20  p-t-4 p-b-4" v-else
									style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
									{{ goods.py_code }}
								</view>
							</view>
							<view class="flex-row flex-ali-cen flex-jus-bet">
								<view class="flex-row flex-ali-cen">
									<view class="p-l-10 p-r-10 f-s-22  p-t-4 p-b-4"
										style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
										{{ goods.specs_unit }}
									</view>
									<view v-if="goods.hasOwnProperty('is_package')">
										<view class="p-l-14 p-r-14 f-s-22 m-l-20  p-t-4 p-b-4"
											v-if="goods.is_package == 2"
											style="background: var(--room-type-bg);border-radius: 8rpx;color: rgb(96 113 201);">
											套餐
										</view>
										<view class="p-l-14 p-r-14 f-s-22 m-l-20  p-t-4 p-b-4" v-else
											style="background: var(--room-type-bg);border-radius: 8rpx;color: #37afbd;">
											单品
										</view>
									</view>

								</view>
								<view v-if="goods.is_package == 2 && goods.spec_item.length == 0"
									@click="chooseTc(goods)" class="p-l-14 p-r-14 f-s-24"
									style="background: #05B089;border-radius: 10rpx;color: #fff;height: 46rpx;line-height: 46rpx">
									选套餐
								</view>
								<view @click="chooseMore(goods)"
									v-else-if="goods.hasOwnProperty('spec_item') && goods.spec_item.length>0"
									class="p-l-14 p-r-14 f-s-24"
									style="background: rgb(60 165 189);border-radius: 10rpx;color: #fff;height: 46rpx;line-height: 46rpx">
									选规格
								</view>
								<view @click="chooseDp(goods)"
									v-else-if="goods.is_package == 1 && goods.spec_item.length == 0 && goods.attribute && goods.attribute!=''"
									class="p-l-14 p-r-14 f-s-24"
									style="background: rgb(60 165 189);border-radius: 10rpx;color: #fff;height: 46rpx;line-height: 46rpx">
									选单品
								</view>
								<view v-else class="flex-row flex-ali-cen">
									<view class="flex-row flex-ali-cen" v-if="checkShowDecBtn(goods.specs_id)">
										<view @click="decNumber(goods,'',-1)">
											<uni-icons color="#e59b3a" type="minus-filled" size="29"></uni-icons>
										</view>
										<view>
											<input :value="getCartNumber(goods.specs_id)" class="uni-input-goods"
												:disabled="true" adjust-position="false" type="number" />
										</view>
									</view>
									<view @click="addNumber(goods,'',-1)">
										<uni-icons color="#e59b3a" type="plus-filled" size="29"></uni-icons>
									</view>
								</view>
							</view>
						</view>

					</view>

				</view>
			</scroll-view>
		</view>
		<view
			style="height: 44px;background: var(--bg-center-color);position: absolute;bottom: 0;left: 0;width: 100vw;">
			<view class="flex-row p-l-30 p-r-30 flex-ali-cen">
				<view class="flex-row flex-ali-cen" @click="showCart()">
					<view>
						<view style="position: relative;">
							<uni-icons color="#e59b3a" type="cart-filled" size="40"></uni-icons>
							<view class="car-number f-s-24">{{totalNumber}}</view>
						</view>
					</view>
					<view class="flex-col flex-jus-bet m-l-40">
						<view class="f-s-28" style="color: #ff6767;font-weight: 600;">￥{{totalAmount}}</view>
						<view v-if="cartList.length>0" class="f-s-24" style="color: var(--grey-text);">
							总计：{{totalNumber}}件物品，{{limit_type == 1?'按数量抵扣':'按金额抵扣'}}</view>
						<view v-else class="f-s-24" style="color: var(--grey-text);">购物车空空如也~</view>
					</view>
				</view>

				<view class="flex-row flex-1 flex-jus-end" @click="sendCar()" style="justify-content: flex-end;">
					<view class="p-l-20 p-r-20 f-s-26"
						style="background: #e59b3a;border-radius: 10rpx;color: #fff;height: 30px;line-height: 30px">
						提交签送
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 套餐选择页面 -->
	<view style="position: absolute;z-index: 101;   ">
		<uni-popup ref="popupTcDetail" type="bottom" :background-color="bgColor" :borderRadius="popupBorder">
			<scroll-view class="scroll-performance-detail" scroll-y :show-scrollbar="false"
				style="max-height: 75vh;background: var(--bg-center-color);min-height: 40vh;">
				<view class="detail-title-performance flex-nowrap bor-bot">
					<view @click="closeTcDetail()" class="flex flex-1"
						style="font-size: 28rpx;text-align: center;color: var(--grey-text);">
						关闭
					</view>
					<view class="flex-row flex-1 " style="color: #05B089;justify-content: flex-end;font-size: 28rpx;"
						@click="addTcDetailCart()">
						加入购物车
					</view>
				</view>
				<view class="flex-row m-t-80 p-l-30  p-t-30 p-r-30 p-b-30 bor-bot" style="box-sizing: border-box;">
					<view style="height: 80px;width: 80px;">
						<image style="height: 80px;width: 80px;"
							:src="chooseGoodsPopup.img?chooseGoodsPopup.img : '/static/image/black_logo.png'"></image>
					</view>
					<view class="flex-col flex-jus-bet m-l-16 flex-1" style="height: 80px">
						<view class="f-s-28 flex-row text-line-one" style="color:var(--white-text);">
							{{ chooseGoodsPopup.specs_name }}
						</view>
						<view class="flex-row flex-ali-cen">
							<view class="p-l-14 p-r-14 f-s-24 p-t-4 p-b-4"
								style="background: var(--room-type-bg);border-radius: 8rpx;color: #ff6767;">
								￥{{ chooseGoodsPopup.price }}
							</view>
							<view class="p-l-10 p-r-10 f-s-24 m-l-20  p-t-4 p-b-4"
								style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
								{{ chooseGoodsPopup.specs_code }}
							</view>
						</view>
						<view class="flex-row flex-ali-cen flex-jus-bet">
							<view class="flex-row flex-ali-cen">
								<view class="p-l-10 p-r-10 f-s-22  p-t-4 p-b-4"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
									{{ chooseGoodsPopup.specs_unit }}
								</view>
								<view class="p-l-14 p-r-14 f-s-22 m-l-20  p-t-4 p-b-4"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: rgb(96 113 201);">
									套餐
								</view>
							</view>
							<view class="flex-row flex-ali-cen">
								<view class="flex-row flex-ali-cen">
									<view @click="decTcDetailNum()">
										<uni-icons color="#e59b3a" type="minus-filled" size="29"></uni-icons>
									</view>
									<view>
										<input :value="chooseGoodsPopup.specs_number" class="uni-input-goods"
											:disabled="true" adjust-position="false" type="number" />
									</view>
								</view>
								<view @click="addTcDetailNum()">
									<uni-icons color="#e59b3a" type="plus-filled" size="29"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="p-l-30 p-r-30  p-t-30" v-if="chooseGoodsPopup.package_item.fixed.length>0">
					<view style="color: var(--white-text);" class="f-s-28">固定套餐</view>
					<view class="flex-row flex-jus-bet p-t-20 f-s-26" style="color: var(--white-text);"
						v-for="(item,index) in chooseGoodsPopup.package_item.fixed" :key="index">
						<view style="width: 40%;color: var(--grey-text);" class="text-line-one">
							{{index+1}}.{{item.specs_name}}
						</view>
						<view style="width: 30%;">
							<view class="flex-row" v-if="item.attribute && item.attribute!=''">
								<view @click="tcAttrFixed(item1,index)"
									v-for="(item1,index1) in item.attribute.split(',')" :key="index1"
									class="p-l-10 p-r-10 f-s-24   p-t-4 p-b-4"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);"
									:class="{'m-l-20':index1!=0}"
									:style="{'color':item1 == item.choice_attribute?'#e59b3a':'var(--grey-text)'}">
									{{ item1 }}
								</view>
							</view>
							<!-- <view v-else class="f-s-24" style="color: var(--grey-text);">无属性可选</view> -->
						</view>
						<view style="width: 30%;color: var(--grey-text);" class="flex-row flex-jus-end">{{item.num}}
							{{item.specs_unit}}
						</view>
					</view>
				</view>
				<view class="p-l-30 p-r-30  p-t-30" v-if="chooseGoodsPopup.package_item.free.length>0">
					<view v-for="(item2,index2) in chooseGoodsPopup.package_item.free" :key="index2">
						<view style="color: var(--white-text);" class="f-s-28" :class="{'p-t-30':index2!=0}">
							{{item2.goods_type}}-自选
						</view>
						<view class="flex-row flex-jus-bet flex-ali-cen p-t-20 f-s-26" style="color: var(--grey-text);"
							v-for="(item3,index3) in item2.goods_item" :key="index3">
							<view style="width: 40%;color: var(--grey-text);" class="text-line-one">
								{{index3+1}}.{{item3.specs_name}}
								<text class="f-s-22" style="color: #ff6767;">{{item3.num}}{{item3.specs_unit}}</text>
							</view>
							<view style="width: 30%;">
								<view class="flex-row" v-if="item3.attribute && item3.attribute!=''">
									<view v-for="(item4,index4) in item3.attribute.split(',')" :key="index4"
										class="p-l-10 p-r-10 f-s-24   p-t-4 p-b-4"
										@click="tcAttrFree(item4,index2,index3)"
										style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);"
										:class="{'m-l-20':index4!=0}"
										:style="{'color':item4 == item3.choice_attribute?'#e59b3a':'var(--grey-text)'}">
										{{ item4 }}
									</view>
								</view>
								<!-- <view v-else class="f-s-24" style="color: var(--grey-text);">无属性可选</view> -->
							</view>
							<view style="width: 30%;color: var(--grey-text);" class="flex-row flex-jus-end">
								<view class="flex-row flex-ali-cen">
									<view @click="decTcFreeNumber(item3,index3,index2)">
										<uni-icons color="rgb(70 173 107)" type="minus-filled" size="29"></uni-icons>
									</view>
									<view>
										<input :value="item3.choose_num" class="uni-input-goods" :disabled="true"
											adjust-position="false" type="number" />
									</view>
								</view>
								<view @click="addTcFreeNumber(item3,index3,index2)">
									<uni-icons color="rgb(70 173 107)" type="plus-filled" size="29"></uni-icons>
								</view>
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</uni-popup>
	</view>

	<!-- 购物车展示 -->
	<view style="position: absolute;z-index: 101;">
		<uni-popup ref="popupCart" type="bottom" :background-color="bgColor" :borderRadius="popupBorder">
			<scroll-view class="scroll-performance-detail" scroll-y :show-scrollbar="false"
				style="max-height: 75vh;background: var(--bg-center-color);min-height: 40vh;">
				<view class="detail-title-performance flex-nowrap bor-bot">
					<view @click="clearCart()" class="flex flex-1"
						style="font-size: 28rpx;text-align: center;color: #05B089;">
						清空
					</view>
					<view class="f-s-28" style="color:var(--grey-text)">
						合计: {{totalNumber}}件, ￥{{totalAmount}}
					</view>
					<view class="flex flex-1 flex-jus-end" style="color: var(--grey-text);font-size: 28rpx;"
						@click="closeCart()">
						关闭
					</view>
				</view>

				<view v-for="(item,index) in cartList" :key="index">
					<view :class="{'m-t-80':index==0}" class="flex-row  p-l-30  p-t-30 p-r-30"
						style="box-sizing: border-box;">
						<view style="height: 80px;width: 80px;">
							<image style="height: 80px;width: 80px;"
								:src="item.img?item.img : '/static/image/black_logo.png'"></image>
						</view>
						<view class="flex-col flex-jus-bet m-l-16 flex-1" style="height: 80px">
							<view class="f-s-28 flex-row text-line-one" style="color:var(--white-text);">
								{{ item.specs_name }}
							</view>
							<view class="flex-row flex-ali-cen">
								<view class="p-l-14 p-r-14 f-s-24 p-t-4 p-b-4"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: #ff6767;">
									￥{{ item.price * item.specs_number }}
								</view>
								<view class="flex-row flex-ali-cen">
									<view class="p-l-10 p-r-10 f-s-22  p-t-4 p-b-4 m-l-20"
										style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
										{{ item.specs_unit }}
									</view>
									<view class="p-l-14 p-r-14 f-s-22 m-l-20  p-t-4 p-b-4"
										style="background: var(--room-type-bg);border-radius: 8rpx;color: rgb(96 113 201);">
										{{item.is_package == 1 ? '单品' : '套餐'}}
									</view>
								</view>
							</view>
							<view class="flex-row flex-ali-cen flex-jus-bet">
								<view v-if="item.is_package == 1" class="p-l-14 p-r-14 f-s-22 p-t-4 p-b-4"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: rgb(96 113 201);">
									{{item.choice_attribute}}
								</view>
								<view v-else class="p-l-14 p-r-14 f-s-24 flex-row flex-ali-cen" style="color: #5697D7;">
									<!-- <view class="f-s-24">套餐明细</view>
									<uni-icons color="#5697D7" type="right" size="13"></uni-icons> -->
								</view>
								<view class="flex-row flex-ali-cen">
									<view class="flex-row flex-ali-cen">
										<view @click="decNumber(item,'car',index)">
											<uni-icons color="#e59b3a" type="minus-filled" size="29"></uni-icons>
										</view>
										<view>
											<input :value="item.specs_number" class="uni-input-goods" :disabled="true"
												adjust-position="false" type="number" />
										</view>
									</view>
									<view @click="addNumber(item,'car',index)">
										<uni-icons color="#e59b3a" type="plus-filled" size="29"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.package_item.fixed.length>0"
						class="flex-row flex-jus-bet p-t-10 f-s-26 p-l-30 p-r-30" style="color: var(--white-text);"
						v-for="(item1,index1) in item.package_item.fixed" :key="index1">
						<view style="width: 40%;color: var(--grey-text);" class="text-line-one">
							{{item1.specs_name}}
						</view>
						<view style="width: 30%;">
							<view class="flex-row" v-if="item1.choice_attribute && item1.choice_attribute!=''">
								<view class="p-l-10 p-r-10 f-s-24   p-t-4 p-b-4"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
									{{ item1.choice_attribute }}
								</view>
							</view>
						</view>
						<view style="width: 30%;color: var(--grey-text);" class="flex-row flex-jus-end">{{item1.num}}
							{{item1.specs_unit}}
						</view>
					</view>
					<view v-if="item.package_item.free.length>0" v-for="(item2,index2) in item.package_item.free"
						:key="index2">
						<view v-for="(item3,index3) in item2.goods_item.filter(item=>item.choose_num>0)" :key="index3"
							class="flex-row flex-jus-bet p-t-10 f-s-26 p-l-30 p-r-30" style="color: var(--white-text);">
							<view style="width: 40%;color: var(--grey-text);" class="text-line-one">
								{{item3.specs_name}}
							</view>
							<view style="width: 30%;">
								<view class="flex-row" v-if="item3.choice_attribute && item3.choice_attribute!=''">
									<view class="p-l-10 p-r-10 f-s-24   p-t-4 p-b-4"
										style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
										{{ item3.choice_attribute }}
									</view>
								</view>
							</view>
							<view style="width: 30%;color: var(--grey-text);" class="flex-row flex-jus-end">
								{{item3.choose_num}}
								{{item3.specs_unit}}
							</view>
						</view>

					</view>
					<view class="line-split m-t-20"></view>
				</view>

			</scroll-view>
		</uni-popup>
	</view>

	<!-- 选择单品展示 -->
	<view style="position: absolute;z-index: 101;   ">
		<uni-popup ref="popupDp" type="bottom" :background-color="bgColor" :borderRadius="popupBorder">
			<scroll-view class="scroll-performance-detail" scroll-y :show-scrollbar="false"
				style="max-height: 75vh;background: var(--bg-center-color);min-height: 40vh;">
				<view class="detail-title-performance flex-nowrap bor-bot">
					<view @click="closeDp()" class="flex flex-1"
						style="font-size: 28rpx;text-align: center;color: var(--grey-text);">
						关闭
					</view>
					<view class="flex flex-1 flex-jus-end" style="color: #05B089;font-size: 28rpx;"
						@click="addDpDetailCart(chooseGoodsDp)">
						加入购物车
					</view>
				</view>
				<view class="flex-row m-t-80 p-l-30  p-t-30 p-r-30 p-b-30 bor-bot" style="box-sizing: border-box;">
					<view style="height: 80px;width: 80px;">
						<image style="height: 80px;width: 80px;"
							:src="chooseGoodsDp.img?chooseGoodsDp.img : '/static/image/black_logo.png'"></image>
					</view>
					<view class="flex-col flex-jus-bet m-l-16 flex-1" style="height: 80px">
						<view class="f-s-28 flex-row text-line-one" style="color:var(--white-text);">
							{{ chooseGoodsDp.specs_name }}
						</view>
						<view class="flex-row flex-ali-cen">
							<view class="p-l-14 p-r-14 f-s-24 p-t-4 p-b-4"
								style="background: var(--room-type-bg);border-radius: 8rpx;color: #ff6767;">
								￥{{ chooseGoodsDp.price }}
							</view>
							<view class="p-l-10 p-r-10 f-s-24 m-l-20  p-t-4 p-b-4"
								style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
								{{ chooseGoodsDp.specs_code }}
							</view>
						</view>
						<view class="flex-row flex-ali-cen flex-jus-bet">
							<view class="flex-row flex-ali-cen">
								<view class="p-l-10 p-r-10 f-s-22  p-t-4 p-b-4"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
									{{ chooseGoodsDp.specs_unit }}
								</view>
								<view class="p-l-14 p-r-14 f-s-22 m-l-20  p-t-4 p-b-4"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: rgb(96 113 201);">
									单品
								</view>
							</view>
							<view class="flex-row flex-ali-cen">
								<view class="flex-row flex-ali-cen">
									<view @click="decDpDetailNum()">
										<uni-icons color="#e59b3a" type="minus-filled" size="29"></uni-icons>
									</view>
									<view>
										<input :value="chooseGoodsDp.specs_number" class="uni-input-goods"
											:disabled="true" adjust-position="false" type="number" />
									</view>
								</view>
								<view @click="addDpDetailNum()">
									<uni-icons color="#e59b3a" type="plus-filled" size="29"></uni-icons>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="p-l-30 p-r-30 p-t-30 text-line-one">
					<view class="f-s-28" style="color: var(--grey-text);">商品属性选择：</view>
					<view class="flex-row p-t-30" v-if="chooseGoodsDp.attribute && chooseGoodsDp.attribute!=''">
						<view @click="dpAttr(item4)" v-for="(item4,index4) in chooseGoodsDp.attribute.split(',')"
							:key="index4" class="p-l-10 p-r-10 f-s-24   p-t-4 p-b-4"
							style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);"
							:class="{'m-l-20':index4!=0}"
							:style="{'color':item4 == chooseGoodsDp.choice_attribute?'#e59b3a':'var(--grey-text)'}">
							{{ item4 }}
						</view>
					</view>
				</view>

			</scroll-view>
		</uni-popup>
	</view>

	<!-- 选择多规格展示 -->
	<view style="position: absolute;z-index: 101;   ">
		<uni-popup ref="morePopup" type="bottom" :background-color="bgColor" :borderRadius="popupBorder">
			<scroll-view class="scroll-performance-detail" scroll-y :show-scrollbar="false"
				style="max-height: 75vh;background: var(--bg-center-color);min-height: 40vh;">
				<view class="detail-title-performance flex-nowrap bor-bot">
					<view @click="closeDp()" class="flex flex-1"
						style="font-size: 28rpx;text-align: center;color: #05B089;">
						多规格列表
					</view>
					<view class="flex flex-1 flex-jus-end" style="color: var(--grey-text);font-size: 28rpx;"
						@click="closeMore()">
						关闭
					</view>
				</view>
				<view class="flex-row flex-ali-cen bor-bot p-l-20 p-r-20 flex-1 m-t-80"
					style="height: 100px;box-sizing: border-box" v-for="(goods,index1) in moreGoods.spec_item"
					:key="index1">
					<view style="height: 80px;width: 80px;">
						<image style="height: 80px;width: 80px;"
							:src="goods.img?goods.img : '/static/image/black_logo.png'"></image>
					</view>
					<view class="flex-col flex-jus-bet m-l-16 flex-1" style="height: 80px">
						<view class="f-s-28 flex-row text-line-one" style="color:var(--white-text);"
							v-if="goods.hasOwnProperty('specs_name')">
							{{ goods.specs_name }}
						</view>
						<view class="f-s-28 flex-row text-line-one" style="color:var(--white-text);"
							v-else-if="goods.hasOwnProperty('name')">
							{{ goods.name }}
						</view>
						<view class="flex-row flex-ali-cen">
							<view class="p-l-14 p-r-14 f-s-24 p-t-4 p-b-4" v-if="goods.hasOwnProperty('price')"
								style="background: var(--room-type-bg);border-radius: 8rpx;color: #ff6767;">
								￥{{ goods.price }}
							</view>
							<view class="p-l-14 p-r-14 f-s-28 p-t-4 p-b-4" v-else
								style="background: var(--room-type-bg);border-radius: 8rpx;color: #ff6767;">
								多规格
							</view>
							<view class="p-l-10 p-r-10 f-s-24 m-l-20  p-t-4 p-b-4"
								v-if="goods.hasOwnProperty('specs_code')"
								style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
								{{ goods.specs_code }}
							</view>
							<view class="p-l-10 p-r-10 f-s-22 m-l-20  p-t-4 p-b-4" v-else
								style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
								{{ goods.py_code }}
							</view>
						</view>
						<view class="flex-row flex-ali-cen flex-jus-bet">
							<view class="flex-row flex-ali-cen">
								<view class="p-l-10 p-r-10 f-s-22  p-t-4 p-b-4"
									style="background: var(--room-type-bg);border-radius: 8rpx;color: var(--grey-text);">
									{{ goods.specs_unit }}
								</view>
								<view v-if="goods.hasOwnProperty('is_package')">
									<view class="p-l-14 p-r-14 f-s-22 m-l-20  p-t-4 p-b-4" v-if="goods.is_package == 2"
										style="background: var(--room-type-bg);border-radius: 8rpx;color: rgb(96 113 201);">
										套餐
									</view>
									<view class="p-l-14 p-r-14 f-s-22 m-l-20  p-t-4 p-b-4" v-else
										style="background: var(--room-type-bg);border-radius: 8rpx;color: #37afbd;">
										单品
									</view>
								</view>

							</view>
							<view v-if="goods.is_package == 2 && goods.spec_item.length == 0" @click="chooseTc(goods)"
								class="p-l-14 p-r-14 f-s-24"
								style="background: #05B089;border-radius: 10rpx;color: #fff;height: 46rpx;line-height: 46rpx">
								选套餐
							</view>
							<view @click="chooseMore(goods)"
								v-else-if="goods.hasOwnProperty('spec_item') && goods.spec_item.length>0"
								class="p-l-14 p-r-14 f-s-24"
								style="background: rgb(60 165 189);border-radius: 10rpx;color: #fff;height: 46rpx;line-height: 46rpx">
								选规格
							</view>
							<view @click="chooseDp(goods)"
								v-else-if="goods.is_package == 1 && goods.spec_item.length == 0 && goods.attribute && goods.attribute!=''"
								class="p-l-14 p-r-14 f-s-24"
								style="background: rgb(60 165 189);border-radius: 10rpx;color: #fff;height: 46rpx;line-height: 46rpx">
								选单品
							</view>
							<view v-else class="flex-row flex-ali-cen">
								<view class="flex-row flex-ali-cen" v-if="checkShowDecBtn(goods.specs_id)">
									<view @click="decNumber(goods,'',-1)">
										<uni-icons color="#e59b3a" type="minus-filled" size="29"></uni-icons>
									</view>
									<view>
										<input :value="getCartNumber(goods.specs_id)" class="uni-input-goods"
											:disabled="true" adjust-position="false" type="number" />
									</view>
								</view>
								<view @click="addNumber(goods,'',-1)">
									<uni-icons color="#e59b3a" type="plus-filled" size="29"></uni-icons>
								</view>
							</view>
						</view>
					</view>

				</view>


			</scroll-view>
		</uni-popup>
	</view>

	<custom-loading-vue ref="loading"></custom-loading-vue>
</template>

<script>
	import customHeaderVue from '@/components/customHeader.vue'
	import customLoadingVue from '@/components/customLoading.vue'

	export default {
		components: {
			customHeaderVue,
			customLoadingVue
		},
		props: {
			roomInfos: {
				type: [Object, String],
				required: true
			},
			type: {
				type: [String, Number],
				required: true
			},
			signLists: {
				type: [Object, String],
				required: true
			}
		},
		data() {
			return {
				scrollTop: '0',
				bgColor: 'var(--bg-color)',
				rightView: 'index-0',
				scrollHeight: '0',
				placeholderInput: '输入商品名称进行检索',
				limit_type: 1, // 1 按数量签送  2 按金额签送
				signList: {}, // 可签详情  金额 数量
				roomInfo: {},
				shopIndex: this.$commonJs.getChooseShopIndex(),
				shopList: this.$commonJs.getShopList(),
				userInfo: this.$commonJs.getUserInfo(),
				customTitle: '实时桌态',
				keyword_search: '',
				goodsList: [],
				chooseTypeIndex: 0,
				cartList: [],
				popupBorder: "20px 20px 20px 20px",
				chooseGoodsPopup: {}, // 选择套餐内容
				chooseGoodsDp: {}, // 选择单品内容
				carTcShowIndex: -1, // 购物车套餐添加数量标识
				moreGoods: {}
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this)
			const self = this
			query.select(".header")
				.boundingClientRect((data) => {
					self.scrollTop = data.height + 10 + 'px'
					let topHeight = data.height + 10 + 'px'
					const cart = '54px'
					self.scrollHeight = `calc(100vh - ${topHeight} - ${cart})`
				})
				.exec();
			this.getStaffGoods()
		},
		onLoad(e) {
			if (e.hasOwnProperty('type')) {
				this.limit_type = e.type
			}
			if (e.hasOwnProperty('signLists')) {
				this.signList = JSON.parse(e.signLists)
			}
			if (e.hasOwnProperty('roomInfos')) {
				this.roomInfo = JSON.parse(e.roomInfos)
				this.customTitle = this.roomInfo.room_name
			}
		},
		computed: {

			// 计算购物车总金额
			totalAmount() {
				return this.cartList.reduce((total, item) => {
					return total + item.specs_number * item.price;
				}, 0).toFixed(2)
			},
			// 购物车总数量
			totalNumber() {
				return this.cartList.reduce((total, item) => {
					return total + item.specs_number;
				}, 0).toFixed(0)
			}
		},
		methods: {
			// 选择多规格物品
			chooseMore(goods) {
				this.moreGoods = JSON.parse(JSON.stringify(goods))
				this.$refs.morePopup.open()
			},
			closeMore() {
				this.$refs.morePopup.close()
			},
			// 选择单品
			chooseDp(goods) {
				this.chooseGoodsDp = JSON.parse(JSON.stringify(goods))
				this.$refs.popupDp.open()
			},
			dpAttr(name) {
				this.chooseGoodsDp.choice_attribute = name
			},
			tcAttrFixed(name, index) {
				this.chooseGoodsPopup.package_item.fixed[index].choice_attribute = name
			},
			tcAttrFree(name, index1, index2) {
				this.chooseGoodsPopup.package_item.free[index1].goods_item[index2].choice_attribute = name
			},
			// 选择单品关闭
			closeDp() {
				this.$refs.popupDp.close()
			},
			// 提交签送
			sendCar() {
				if (this.cartList.length <= 0) {
					this.$commonJs.showMessage('购物车空空如也~')
					return
				}
				const carList = this.cartList.map((item, index) => {
					if (item.is_package == 2) {
						item.free_new = 1
						item.fixed = item.package_item.fixed
						item.free = item.package_item.free
						item.fixed = item.fixed.map((item1, index1) => {
							item1.specs_number = item1.num
							item1.free_new = 1
							return item1
						})
						item.free.map((item2, index2) => {
							let goods = item2.goods_item
							goods.map((item3, index3) => {
								item3.specs_number = item3.choose_num
								item3.free_new = 1
								return item3
							})
							return item2
						})
					}
					return item
				})
				const self = this
				const params = {
					limit_type: self.limit_type,
					notes: "",
					room_book_id: self.roomInfo.room_book_id,
					s_from: 2,
					phone: self.userInfo.phone,
					goods_data: self.cartList,
					send_staff_id: 1,
					send_staff_name: '集团签送'
				}
				this.$commonJs.queryCache('/admin/staff/submitSignOff', params, {
					before() {
						self.$refs.loading.show()
					},
					success(res) {
						try {
							const {
								code,
								data,
								msg,
								server_ip
							} = res
							self.cartList = []
							self.$commonJs.showMessage('签送成功~', 'success')
							if (self.limit_type == 2) {
								self.getSignInfo()
							}
						} catch (error) {
							self.$commonJs.showMessage(error)
						}
					},
					fail(err) {
						self.$commonJs.logger.debug(err, 'error')
					},
					complete() {
						self.$refs.loading.hide()
					}
				}, {
					"X-Merchant-ID": self.shopList[self.shopIndex].shop_id
				})
			},

			// 获取金额签送余额
			getSignInfo() {
				const self = this
				const params = {
					phone: self.userInfo.phone
				}
				this.$commonJs.queryCache('/admin/staff/getStaffSignOffGoods', params, {
					before() {
						self.$refs.loading.show()
					},
					success(res) {
						try {
							const {
								code,
								data,
								msg,
								server_ip
							} = res
							self.signList = data
						} catch (error) {
							//TODO handle the exception
							self.$commonJs.showMessage(error)
						}
					},
					fail(err) {
						self.$commonJs.logger.debug(err, 'error')
					},
					complete() {
						self.$refs.loading.hide()
					}
				}, {
					"X-Merchant-ID": self.shopList[self.shopIndex].shop_id
				})
			},

			// 关闭购物车 
			closeCart() {
				this.$refs.popupCart.close()
			},

			// 清空购物车
			clearCart() {
				this.cartList = []
			},

			// 展开购物车
			showCart() {
				console.log(this.cartList)
				if (this.cartList.length <= 0) {
					this.$commonJs.showMessage('购物车空空如也~')
					return
				}
				this.$refs.popupCart.open()
			},

			// 套餐添加至购物车
			addTcDetailCart() {
				if (this.chooseGoodsPopup.specs_number < 1) {
					this.$commonJs.showMessage('套餐数量出错！')
					return
				}
				let status = true
				// 先判断自选是否选够
				if (this.chooseGoodsPopup.package_item.free.length > 0) {
					const free = this.chooseGoodsPopup.package_item.free
					for (let i = 0; i < free.length; i++) {
						let goods = free[i].goods_item
						// 找出占比最小的值
						let minValue = Math.min(...goods.map(item => item.percentage))
						let total = goods.reduce((sum, item) => {
							return sum + (item.choose_num * item.percentage);
						}, 0)
						if (minValue + total <= 100) {
							this.$commonJs.showMessage(free[i].goods_type + '还未选满！')
							status = false
							break
						}
					}
				}
				if (!status) {
					return
				} else {
					this.closeTcDetail()
				}
				// 购物车反选添加数量 先移除原有数据
				if (this.carTcShowIndex > -1) {
					this.cartList.splice(this.carTcShowIndex, 1)
				}
				const existingIndex = this.cartList.findIndex(item => item.specs_id === this.chooseGoodsPopup.specs_id)
				if (existingIndex !== -1) {
					if (this.chooseGoodsPopup.package_item.free.length == 0) {
						let carTcAttr = JSON.stringify(this.cartList[existingIndex].package_item.fixed.map(item=>item.specs_id+'-'+item.choice_attribute))
						let chooseAttr = JSON.stringify(this.chooseGoodsPopup.package_item.fixed.map(item=>item.specs_id+'-'+item.choice_attribute)) 
						if(carTcAttr == chooseAttr){
							this.cartList[existingIndex].specs_number +=1
							this.cartList[existingIndex].package_item.fixed.map((item,index)=>{
								item.num = item.all_num * this.cartList[existingIndex].specs_number
								return item
							})
							return
						}
					}
				}
				this.cartList.push(this.chooseGoodsPopup)
			},

			// 套餐增加数量
			addTcDetailNum() {
				this.chooseGoodsPopup.specs_number += 1
				// 套餐内容翻倍 固定
				if (this.chooseGoodsPopup.package_item.fixed.length > 0) {
					this.chooseGoodsPopup.package_item.fixed.map((item) => {
						item.num = item.all_num * this.chooseGoodsPopup.specs_number
						return item
					})
				}
				// 套餐内容翻倍 自选
				if (this.chooseGoodsPopup.package_item.free.length > 0) {
					this.chooseGoodsPopup.package_item.free.map((item) => {
						item.goods_item.map((item1) => {
							let number = item1.all_num * this.chooseGoodsPopup.specs_number
							item1.num = item1.num + item1.all_num
							item1.percentage = Math.floor(100 / number * 1e8) / 1e8
							return item1
						})
						return item
					})
				}
			},

			// 套餐减少数量
			decTcDetailNum() {
				if (this.chooseGoodsPopup.specs_number == 1 && this.carTcShowIndex == -1) {
					this.closeTcDetail()
					return
				}
				// 购物车弹出层可以直接清除该套餐
				if (this.carTcShowIndex > -1 && this.chooseGoodsPopup.specs_number == 1) {
					this.closeTcDetail()
					this.cartList.splice(this.carTcShowIndex, 1)
					return
				}
				this.chooseGoodsPopup.specs_number -= 1
				// 套餐内容翻倍 固定
				if (this.chooseGoodsPopup.package_item.fixed.length > 0) {
					this.chooseGoodsPopup.package_item.fixed.map((item) => {
						item.num = item.all_num * this.chooseGoodsPopup.specs_number
						return item
					})
				}
				// 套餐内容翻倍 自选
				if (this.chooseGoodsPopup.package_item.free.length > 0) {
					this.chooseGoodsPopup.package_item.free.map((item) => {
						item.goods_item.map((item1) => {
							let number = item1.all_num * this.chooseGoodsPopup.specs_number
							if ((item1.num - item1.all_num) < 0) {
								item1.num = number
								item1.choose_num = 0
							} else {
								item1.num = item1.num - item1.all_num
							}

							item1.percentage = Math.floor(100 / number * 1e8) / 1e8
							return item1
						})
						return item
					})
				}
			},

			// 单品增加数量
			addDpDetailNum() {
				this.chooseGoodsDp.specs_number += 1
			},

			// 单品减小数量
			decDpDetailNum() {
				if (this.chooseGoodsDp.specs_number == 1) {
					this.closeDp()
					return
				} else {
					this.chooseGoodsDp.specs_number -= 1
				}
			},


			// 自选套餐进行添加操作
			addTcFreeNumber(item, itemIndex, typeIndex) {
				let checkTcFreeNumber = this.checkTcFreeNumber(typeIndex),
					allFreeNumber = checkTcFreeNumber + item.percentage
				if (allFreeNumber <= 100) {
					this.chooseGoodsPopup.package_item.free[typeIndex].goods_item[itemIndex].choose_num += 1
					this.resetFreeMaxNumber(allFreeNumber, typeIndex)
				} else {
					// this.$commonJs.showMessage('不能超出最大数量！')
				}
			},

			closeTcDetail() {
				this.$refs.popupTcDetail.close()
			},

			resetFreeMaxNumber(allFreeNumber, typeIndex) {
				this.$nextTick(() => {
					this.chooseGoodsPopup.package_item.free[typeIndex].goods_item.map((item, index) => {
						item.num = Math.floor((100 - allFreeNumber) / item.percentage)
						return item
					})
				})
			},

			// 自选套餐进行减少操作
			decTcFreeNumber(item, itemIndex, typeIndex) {
				if (item.choose_num > 0) {
					this.chooseGoodsPopup.package_item.free[typeIndex].goods_item[itemIndex].choose_num -= 1
					let checkTcFreeNumber = this.checkTcFreeNumber(typeIndex)
					this.resetFreeMaxNumber(checkTcFreeNumber, typeIndex)
				}
			},

			// 检测自选类型已选满多少
			checkTcFreeNumber(typeIndex) {
				return this.chooseGoodsPopup.package_item.free[typeIndex].goods_item.reduce((total, item) => {
					return total + (item.choose_num * item.percentage)
				}, 0)
			},

			// 单品加入购物车
			addDpDetailCart(goods) {
				const existingIndex = this.cartList.findIndex(item => item.specs_id == goods.specs_id && item
					.choice_attribute == goods.choice_attribute)
				if (existingIndex !== -1) {
					this.cartList[existingIndex].specs_number += goods.specs_number
				} else {
					// 如果不存在，添加新商品到购物车
					const newItem = {
						specs_name: goods.specs_name,
						goods_id: goods.goods_id,
						specs_id: goods.specs_id,
						specs_number: goods.specs_number,
						specs_unit: goods.specs_unit,
						choice_attribute: goods.choice_attribute,
						price: goods.price,
						is_package: goods.is_package,
						fixed: [],
						free: [],
						dance: [],
						champagne: [],
						package_item: {
							fixed: [],
							free: []
						},
						img: '',
						time_id: +new Date(),
						isOpened: "none"
					}
					this.cartList.push(newItem)
				}
				this.closeDp()
			},

			// 商品添加数量
			addNumber(goods, status, index = -1) {
				const existingIndex = this.cartList.findIndex(item => item.specs_id === goods.specs_id)
				if (existingIndex !== -1) {
					// 购物车套餐数量加
					if (goods.is_package == 2 && status == 'car' && goods.package_item.free.length > 0) {
						this.closeCart()
						this.carTcShowIndex = index
						this.chooseGoodsPopup = JSON.parse(JSON.stringify(goods))
						this.$refs.popupTcDetail.open()
						return
					}
					if (goods.is_package == 2 && status == 'car' && goods.package_item.free.length == 0) {
						this.cartList[existingIndex].specs_number += 1
						this.cartList[existingIndex].package_item.fixed.map((item) => {
							let number = item.all_num * this.cartList[existingIndex].specs_number
							item.num = number
							return item
						})
						return
					}
					this.cartList[existingIndex].specs_number += 1
				} else {
					// 如果不存在，添加新商品到购物车
					const newItem = {
						specs_name: goods.specs_name,
						goods_id: goods.goods_id,
						specs_id: goods.specs_id,
						specs_number: 1,
						specs_unit: goods.specs_unit,
						choice_attribute: goods.choice_attribute,
						price: goods.price,
						is_package: goods.is_package,
						fixed: [],
						free: [],
						dance: [],
						champagne: [],
						package_item: {
							fixed: [],
							free: []
						},
						img: '',
						time_id: +new Date(),
						isOpened: "none"
					}
					this.cartList.push(newItem)
				}
			},

			// 单品减少
			decNumber(goods, status, index = -1) {
				const existingIndex = this.cartList.findIndex(item => item.specs_id === goods.specs_id)
				if (existingIndex !== -1) {
					// 购物车套餐数量减
					if (goods.is_package == 2 && status == 'car' && goods.package_item.free.length > 0) {
						this.closeCart()
						this.carTcShowIndex = index
						this.chooseGoodsPopup = JSON.parse(JSON.stringify(goods))
						this.$refs.popupTcDetail.open()
						return
					}
					if (goods.is_package == 2 && status == 'car' && goods.package_item.free.length == 0) {
						if (this.cartList[existingIndex].specs_number == 1) {
							// 数量为 1，移除商品
							this.cartList.splice(existingIndex, 1);
							return
						}
						this.cartList[existingIndex].specs_number -= 1
						this.cartList[existingIndex].package_item.fixed.map((item) => {
							let number = item.all_num * this.cartList[existingIndex].specs_number
							item.num = number
							return item
						})
						return
					}
					if (this.cartList[existingIndex].specs_number == 1) {
						// 数量为 1，移除商品
						this.cartList.splice(existingIndex, 1);
					} else {
						// 数量大于 1，减少 1
						this.cartList[existingIndex].specs_number -= 1;
					}
				}
			},

			getCartNumber(specs_id) {
				const existingIndex = this.cartList.findIndex(item => item.specs_id === specs_id)
				if (existingIndex !== -1) {
					return this.cartList[existingIndex].specs_number
				}
				return 0
			},

			chooseTc(goods) {
				let new_goods = JSON.parse(JSON.stringify(goods))
				if (new_goods.package_item.free.length > 0) {
					new_goods.package_item.free.map((item, index) => {
						if (item.goods_item.length > 0) {
							item.goods_item.map((item1, index1) => {
								item1.choose_num = 0
								item1.percentage = Math.floor(100 / item1.num * 1e8) / 1e8
								return item1
							})
						}
						return item
					})
				}
				new_goods.specs_number = 1
				this.chooseGoodsPopup = new_goods
				this.carTcShowIndex = -1
				this.closeMore()
				this.$refs.popupTcDetail.open()
			},
			/**
			 * 检查购物车是否存在某个物品
			 * @param specs_id
			 * @return {boolean}
			 */
			checkShowDecBtn(specs_id) {
				return this.cartList.some(item => item.specs_id == specs_id)
			},
			handleSearchClick() {
				this.getStaffGoods()
			},
			chooseType(index) {
				this.chooseTypeIndex = index
				this.rightView = 'index-' + index
			},
			// 滚动事件处理
			onScroll(e) {
				const scrollTop = e.detail.scrollTop;
				let selectedIndex = 0;

				let offsetTop = 0;
				for (let i = 0; i < this.goodsList.length; i++) {
					offsetTop += this.goodsList[i].item.length * 100 + 40; // 每个商品的高度是50px
					if (scrollTop < offsetTop) {
						selectedIndex = i;
						break;
					}
				}
				if (this.chooseTypeIndex !== selectedIndex) {
					this.chooseTypeIndex = selectedIndex;
				}
			},
			getStaffGoods() {
				const self = this
				const params = {
					"phone": self.userInfo.phone,
					"limit_type": self.limit_type,
					"goods_name": self.keyword_search,
					"specs_type": 0
				}
				this.$commonJs.queryCache('/admin/staff/getStaffGoods', params, {
					before() {
						self.$refs.loading.show()
					},
					success(res) {
						try {
							const {
								code,
								data,
								msg,
								server_ip
							} = res
							if (data.length > 0) {
								const goods = data.map((item) => {
									let items = item.item;
									item.item = items.filter(item1 => {
										if (item1.is_champagne || item1.is_dance) {
											return !(item1.is_dancer == 1 || item1.is_champagne ==
												1)
										}
										return true
									});
									return item
								});
								self.goodsList = goods
							}
						} catch (error) {
							//TODO handle the exception
							self.$commonJs.showMessage(error)
						}
					},
					fail(err) {
						self.$commonJs.logger.debug(err, 'error')
					},
					complete() {
						self.$refs.loading.hide()
					}
				}, {
					"X-Merchant-ID": self.shopList[self.shopIndex].shop_id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		display: flex;
	}

	.detail-title-performance {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		position: fixed;
		top: 0;
		z-index: 102;
		background-color: var(--bg-center-color);
		box-sizing: border-box;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.car-number {
		height: 40rpx;
		width: 40rpx;
		border-radius: 50%;
		background-color: #ff6767;
		position: absolute;
		top: 0;
		text-align: center;
		line-height: 40rpx;
		right: -10px;
		color: #fff;
	}

	.text-line-one {
		display: -webkit-box;
		/* 使用 WebKit 布局 */
		-webkit-line-clamp: 1;
		/* 限制显示最多 2 行 */
		-webkit-box-orient: vertical;
		/* 设置为垂直方向 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		box-sizing: border-box;
		/* 包括 padding 和 border 在内计算宽度 */
		white-space: normal;
	}

	.text-line {
		// display: -webkit-box;
		/* 必须使用 -webkit-box */
		-webkit-line-clamp: 2;
		/* 限制显示最多 2 行 */
		-webkit-box-orient: vertical;
		/* 设置为垂直方向 */
		overflow: hidden;
		/* 隐藏超出内容 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		line-height: 35rpx;
		/* 设置行高 */
		font-size: 28rpx;
		/* 设置字体大小 */
		width: 100%;
		/* 设置宽度，确保换行生效 */
		max-width: 100%;
		/* 最大宽度100% */
		height: 110rpx;
		/* 高度设置为 2 行 */
		box-sizing: border-box;
		/* 确保内边距和边框不影响布局 */
		white-space: normal;
		/* 允许文本换行 */
		display: flex;
		/* 使用 Flexbox */
		flex-direction: column;
		/* 设置垂直方向 */
		justify-content: center;
		/* 垂直居中对齐文本 */
		align-items: start;
		/* 水平居中对齐文本 */
		color: var(--grey-text);
	}

	.active-type:before {
		content: "";
		display: inline-block;
		width: 8rpx;
		height: 110rpx;
		// background-color: #06C3D4;
		background-color: #6BB9E5;
		position: absolute;
		left: 0;
	}

	.active-type {
		color: #6BB9E5;
	}

	.scroll {
		box-sizing: border-box;
		width: 188rpx;
		background: var(--bg-center-color);
	}

	.custom-search {
		flex: 1;
		display: flex;
		flex-direction: row;
		height: 70rpx;
		line-height: 70rpx;
		align-items: center;
		padding: 0 30rpx 20rpx 30rpx;
	}

	.uni-input-feild {
		background-color: var(--input-bg);
		border-radius: 10rpx;
		width: 180rpx;
		display: flex;
		height: 55rpx;
		line-height: 55rpx;
		flex: 1;
		text-indent: 20rpx;
		font-size: 24rpx;
		margin: 0 10rpx;
	}

	.uni-input {
		background-color: var(--input-bg);
		border-radius: 35rpx;
		width: 100%;
		display: flex;
		height: 60rpx;
		flex: 1;
		text-indent: 30rpx;
	}

	@media (prefers-color-scheme: light) {
		.uni-input-goods {
			background: #efefef !important;
		}
	}

	@media (prefers-color-scheme: dark) {
		.uni-input-goods {
			background: #000000 !important;
		}
	}

	.uni-input-goods {
		color: var(--white-text);
		width: 50rpx;
		height: 40rpx;
		border-radius: 6rpx;
		display: flex;
		flex: 1;
		text-align: center;
	}

	.sure-search {
		font-size: 28rpx;
		color: var(--grey-text);
	}
</style>